<template>
  <div class="order-detail">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <el-button @click="goBack" type="primary" plain>返回列表</el-button>
        </div>
      </template>

      <!-- 订单状态 -->
      <div class="order-status">
        <el-steps :active="getOrderStep" finish-status="success">
          <el-step title="待付款" description="等待买家付款"></el-step>
          <el-step title="待发货" description="买家已付款"></el-step>
          <el-step title="已发货" description="商品已发出"></el-step>
          <el-step title="已完成" description="交易完成"></el-step>
        </el-steps>
      </div>

      <!-- 订单基本信息 -->
      <div class="order-info">
        <h3>订单信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单编号">{{ orderInfo.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ orderInfo.createTime }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getOrderStatusType">{{ orderInfo.statusText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ orderInfo.paymentMethod }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 商品信息 -->
      <div class="goods-info">
        <h3>商品信息</h3>
        <el-table :data="orderInfo.goodsList" border style="width: 100%">
          <el-table-column prop="goodsName" label="商品名称" min-width="200"></el-table-column>
          <el-table-column prop="price" label="单价" width="120">
            <template #default="scope">
              ¥{{ scope.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
          <el-table-column label="小计" width="120">
            <template #default="scope">
              ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 收货信息 -->
      <div class="delivery-info">
        <h3>收货信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="收货人">{{ orderInfo.receiverName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ orderInfo.receiverPhone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ orderInfo.receiverAddress }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 订单金额信息 -->
      <div class="amount-info">
        <h3>金额信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="商品总额">¥{{ orderInfo.goodsAmount?.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="运费">¥{{ orderInfo.freight?.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="优惠金额">¥{{ orderInfo.discount?.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="实付金额">
            <span class="total-amount">¥{{ orderInfo.totalAmount?.toFixed(2) }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 操作按钮 -->
      <div class="order-actions" v-if="orderInfo.status === 'PENDING_SHIPMENT'">
        <el-button type="primary" @click="handleShip">发货</el-button>
      </div>
    </el-card>

    <!-- 发货对话框 -->
    <el-dialog v-model="shipDialogVisible" title="订单发货" width="500px">
      <el-form :model="shipForm" label-width="100px">
        <el-form-item label="物流公司">
          <el-select v-model="shipForm.company" placeholder="请选择物流公司">
            <el-option label="顺丰速运" value="SF"></el-option>
            <el-option label="中通快递" value="ZTO"></el-option>
            <el-option label="圆通速递" value="YTO"></el-option>
            <el-option label="韵达快递" value="YD"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="shipForm.trackingNo" placeholder="请输入物流单号"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shipDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitShip">确认发货</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'

const route = useRoute()
const router = useRouter()
const orderId = route.params.id

// 订单信息
const orderInfo = ref({
  orderNo: '',
  createTime: '',
  status: '',
  statusText: '',
  paymentMethod: '',
  goodsList: [],
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  goodsAmount: 0,
  freight: 0,
  discount: 0,
  totalAmount: 0
})

// 发货相关
const shipDialogVisible = ref(false)
const shipForm = ref({
  company: '',
  trackingNo: ''
})

// 获取订单状态对应的步骤
const getOrderStep = computed(() => {
  const statusMap = {
    'PENDING_PAYMENT': 1,
    'PENDING_SHIPMENT': 2,
    'SHIPPED': 3,
    'COMPLETED': 4
  }
  return statusMap[orderInfo.value.status] || 1
})

// 获取订单状态对应的标签类型
const getOrderStatusType = computed(() => {
  const typeMap = {
    'PENDING_PAYMENT': 'warning',
    'PENDING_SHIPMENT': 'primary',
    'SHIPPED': 'success',
    'COMPLETED': 'info'
  }
  return typeMap[orderInfo.value.status] || 'info'
})

// 获取订单详情
const getOrderDetail = async () => {
  try {
    const res = await service.get(`/merchant/orders/${orderId}`)
    if (res) {
      orderInfo.value = res
    }
  } catch (error) {
    ElMessage.error('获取订单详情失败')
    console.error(error)
  }
}

// 返回列表
const goBack = () => {
  router.push('/merchant/orders')
}

// 处理发货
const handleShip = () => {
  shipDialogVisible.value = true
}

// 提交发货
const submitShip = async () => {
  if (!shipForm.value.company || !shipForm.value.trackingNo) {
    ElMessage.warning('请填写完整的物流信息')
    return
  }

  try {
    await service.post(`/merchant/orders/${orderId}/ship`, shipForm.value)
    ElMessage.success('发货成功')
    shipDialogVisible.value = false
    getOrderDetail() // 刷新订单信息
  } catch (error) {
    ElMessage.error('发货失败')
    console.error(error)
  }
}

onMounted(() => {
  getOrderDetail()
})
</script>

<style scoped>
.order-detail {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-status {
  margin-bottom: 30px;
}

.order-info,
.goods-info,
.delivery-info,
.amount-info {
  margin-bottom: 30px;
}

h3 {
  margin-bottom: 15px;
  font-weight: 500;
  color: #303133;
}

.total-amount {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.order-actions {
  margin-top: 20px;
  text-align: center;
}
</style> 